<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" th:replace="~{common/base :: layout(~{::title}, ~{::content}, ~{::style}, ~{::script})}">
<head>
    <title>登录 - 优选商城</title>
    <style th:fragment="style">
        .login-container {
            max-width: 500px;
            margin: 2rem auto;
            padding: 2rem;
            border-radius: 10px;
            box-shadow: 0 0 20px rgba(0,0,0,0.1);
            background: white;
        }
        .login-title {
            text-align: center;
            margin-bottom: 2rem;
            color: #1e3c72;
        }
        .form-floating {
            margin-bottom: 1rem;
        }
        .btn-login {
            width: 100%;
            padding: 0.8rem;
            background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
            border: none;
            color: white;
            font-weight: 500;
            margin-top: 1rem;
        }
        .btn-login:hover {
            background: linear-gradient(135deg, #2a5298 0%, #1e3c72 100%);
            color: white;
        }
        .register-link {
            text-align: center;
            margin-top: 1rem;
        }
    </style>
</head>
<body>
    <div th:fragment="content">
        <div class="container">
            <div class="login-container">
                <h2 class="login-title">用户登录</h2>
                
                <form id="loginForm">
                    <div class="form-floating">
                        <input type="text" class="form-control" id="username" name="username" placeholder="用户名" required>
                        <label for="username">用户名</label>
                    </div>
                    
                    <div class="form-floating">
                        <input type="password" class="form-control" id="password" name="password" placeholder="密码" required>
                        <label for="password">密码</label>
                    </div>
                    
                    <button type="submit" class="btn btn-login">登录</button>
                    
                    <div class="register-link">
                        还没有账号？<a th:href="@{/register}">立即注册</a>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script th:fragment="script">
        $(document).ready(function() {
            // 表单提交
            $('#loginForm').submit(function(e) {
                e.preventDefault();
                
                // 表单验证
                if (!this.checkValidity()) {
                    e.stopPropagation();
                    $(this).addClass('was-validated');
                    return;
                }

                // 提交表单
                $.ajax({
                    url: '/api/login',
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify({
                        username: $('#username').val(),
                        password: $('#password').val()
                    }),
                    beforeSend: function() {
                        console.log('正在发送登录请求...');
                    },
                    success: function(res) {
                        console.log('登录响应:', res);
                        if (res.code === 0) {
                            showSuccess('登录成功，欢迎回来！');
                            setTimeout(function() {
                                window.location.href = '/';
                            }, 1000);
                        } else {
                            showError(res.msg || '登录失败');
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error('登录请求失败:', status, error);
                        showError('登录失败，请重试');
                    }
                });
            });
        });
    </script>
</body>
</html> 